<template>
  <div
    class="upload-multiple-img"
    :class="{
      small: size === 'small'
    }"
  >
    <el-upload
      class="upload"
      multiple
      :auto-upload="true"
      :limit="5"
      v-model:file-list="fileList"
      list-type="picture-card"
      :http-request="handleUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible" width="340px">
      <div class="w-full flex justify-center items-center">
        <img class="w-[300px]" :src="dialogImageUrl" />
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reqUploadImg } from "@/api/user";
import { Plus } from "@element-plus/icons-vue";
import { message } from "@/utils/message";
import {
  UploadFile,
  UploadFiles,
  UploadProgressEvent,
  UploadProps,
  UploadRequestOptions,
  UploadUserFile
} from "element-plus";

withDefaults(defineProps<{ size?: "default" | "small" }>(), {
  size: "default"
});

const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const emit = defineEmits(["update"]);
const handleUpload = async (option: UploadRequestOptions) => {
  let param = new FormData();
  param.append("ImgPath", option.file);
  const res = await reqUploadImg(param, (evt: ProgressEvent) => {
    const progressEvt = evt as UploadProgressEvent;
    progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0;
    option.onProgress(progressEvt);
  });
  option.onSuccess("/" + res.data.ImgPath);
};

// 上传成功后的处理
const handleSuccess = (fileUrl: any, file: UploadFile, fileList: UploadFiles) => {
  if (fileUrl) {
    fileList.forEach(item => {
      if (item.raw === file.raw) {
        // 如果 raw 文件对象相同，更新文件的 URL
        item.name = fileUrl;
      }
    });
    emit(
      "update",
      fileList.map(item => item.name)
    );
  }
};

const handleExceed = () => {
  message.warning("最多上传5张图片");
};
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
defineExpose({
  clear: () => {
    fileList.value = [];
  }
});
</script>
<style scoped lang="scss">
.upload-multiple-img {
  :deep() {
    .el-icon--close-tip {
      display: none !important;
    }
    .el-upload-list--picture-card {
      --el-upload-list-picture-card-size: 80px;
    }
    .el-upload-dragger {
      --el-upload-dragger-padding-horizontal: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-upload--picture-card {
      --el-upload-picture-card-size: 80px;
    }
  }
}
.upload-multiple-img.small {
  :deep() {
    .el-icon--close-tip {
      display: none !important;
    }
    .el-upload-list--picture-card {
      --el-upload-list-picture-card-size: 50px;
    }
    .el-upload-dragger {
      --el-upload-dragger-padding-horizontal: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-upload--picture-card {
      --el-upload-picture-card-size: 50px;
    }
  }
}
</style>
